<template>
	<view class="uni-pages">
		<z-paging ref="paging" v-model="dataList" @query="queryList">
			<template slot="top">
				<view class="bg-white padding-tb-sm text-center">客户数(3)</view>
			</template>
			<view class="card margin padding-sm bg-white text-82 font-14" v-for="item in dataList">
				<view class="top-info flex align-center justify-between">
					<view class="flex-1">
						<view class="flex align-center padding-bottom-sm">
							<view class="bg-main-green margin-right-sm"
								style="width: 14rpx;height: 14rpx;border-radius: 50%;"></view>
							<view class="flex align-center">九州通 | 山西九九仓</view>
						</view>
						<view class="flex align-center text-333 padding-bottom-sm">
							<view class="bg-main-yellow margin-right-sm"
								style="width: 14rpx;height: 14rpx;border-radius: 50%;"></view>
							<view class="flex align-center font-weight-blod">太原市小店区梁栋诊所</view>
						</view>
						<view class="flex align-center padding-bottom-sm">
							<view class="bg-white margin-right-sm"
								style="width: 14rpx;height: 14rpx;border-radius: 50%;"></view>
							<view>用途：购销/山西药九九</view>
						</view>
					</view>
					<view class="flex align-center justify-end font-24 text-999">
						<text class="cuIcon-right"></text>
					</view>
				</view>
				<view class="flex align-center" style="position: relative;overflow: hidden;">
					<template v-for="(item,index) in 6">
						<view class="margin-right-sm" v-if="index<5">
							<image src="/static/icon/yinpin.png"
								:style="{'width': imageWidth+'px','height':imageWidth+'px'}"
								style="border-radius: 20rpx;background-color: #F7F7F7;"></image>
						</view>
					</template>
					<view style="position: absolute;right: 0px;top: 0px;width: 94rpx;padding: 6rpx;"
						class="bg-white text-82 font-12 flex-column align-center justify-center"
						:style="{'height': imageWidth+'px'}">
						<view>共1个</view>
						<view>品规</view>
					</view>

				</view>
			</view>
		</z-paging>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				windowWidth: 0,
				imageWidth: 0,
				dataList: []

			}
		},
		onLoad() {
			//获取屏幕宽度
			uni.getSystemInfo({
				success: (res) => {
					this.windowWidth = res.windowWidth - 90
					this.imageWidth = this.windowWidth / 5
					console.log("屏幕宽度", this.windowWidth)
				}
			})

		},
		onShow() {

		},
		methods: {

			// @query所绑定的方法不要自己调用！！需要刷新列表数据时，只需要调用this.$refs.paging.reload()即可
			async queryList(pageNo, pageSize) {
				console.log(pageNo, pageSize)
				console.log("判断是否登录", this.isLogin)
				if (pageNo == 1) {
					let res = [{
						id: 1
					}, {
						id: 1
					}, {
						id: 1
					}, {
						id: 1
					}, {
						id: 1
					}]
					this.$refs.paging.complete(res)

				} else {
					this.$refs.paging.complete([])
				}
				// if (!this.isLogin) {
				// 	this.$refs.paging.complete(false);
				// 	return;
				// }
				// try {
				// 	let data = await this.$http.post(this.$api.edu.getOnlineCourseSelectionList, {
				// 		key: this.dataForm.key,
				// 		studyId: this.dataForm.studyId ? this.dataForm.studyId : -1,
				// 	})
				// 	this.$refs.paging.complete(data.list)
				// } catch (e) {
				// 	this.$refs.paging.complete([]);
				// }

			},


		}
	}
</script>

<style scoped lang="scss">
	.uni-pages {
		height: 100vh;
		background-color: #F6F6F6;
	}

	.card {
		border-radius: 28rpx;
	}
</style>